<template>
    <div class="person">
     <h1>监视情况一：【ref】定义的【基本类型】数据</h1>
     <!-- 求和 -->
    <button @click="changeSum">点击累加</button>
      <h2>结果:{{ sum }}</h2>

    </div>
  </template>

<script setup lang="ts">

    import {ref, watch} from 'vue';
  //数据
    let sum = ref(0);
  //方法
    function changeSum(){
      sum.value += 1
    }

  //监视器watch：监视情况一：【ref】定义的【基本类型】数据
  //stopWatch表示停止监视
   const stopWatch =  watch(sum,(newValue,olderValue)=>{
      console.log("监视到了数据变化：",newValue,olderValue)
      if(newValue >= 10){
        stopWatch();
      }
    })
    console.log(stopWatch)

</script>

<style scoped>
.person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>